<template>
  <div>
    <form class="search-container">
      <input
        type="text"
        id="search-bar"
        placeholder="搜索视频"
        v-model="title"
      />
      <span href="#" @click="getDataList"
        ><img
          class="search-icon"
          src="http://www.endlessicons.com/wp-content/uploads/2012/12/search-icon.png"
      /></span>
    </form>
    <div class="sort">
      <div
        :class="{ active: sortValue === item.id }"
        v-for="item of sortArr"
        :key="item.id"
      >
        <el-button type="text" @click="sort(item.id)">
          {{ item.label }}
        </el-button>
      </div>
    </div>
    <div
      class="tags"
      :style="[
        { overflow: isCollapse ? 'none' : 'hidden' },
        { height: isCollapse ? 'auto' : '150px' },
      ]"
    >
      <!-- 随机tag -->
      <div
        v-for="item of tagList"
        :key="item.id"
        :style="[{ color: tool.RandomColor() }]"
        @click="chooseTag(item.id)"
        class="tag"
        :class="{ active: selectTags.indexOf(item.id) !== -1 }"
      >
        {{ item.name }}
      </div>
      <div
        class="collapse"
        @click="isCollapse = !isCollapse"
        v-if="tagList.length > 0"
      >
        {{ isCollapse ? "折叠" : "展开" }}
      </div>
    </div>
    <div
      class="video-pc"
      v-loading="loading"
      element-loading-text="Loading..."
      element-loading-svg-view-box="-10, -10, 50, 50"
      element-loading-background="rgba(240, 242, 244, 0.9)"
      style="width: 100%"
      v-if="mobile === 'false' ? false : true"
      :class="{ zw: loading }"
    >
      <div v-for="item of dataList" :key="item.id">
        <homeVideoPc :data="item"></homeVideoPc>
      </div>
    </div>
    <div
      class="video-group"
      v-loading="loading"
      element-loading-text="Loading..."
      element-loading-svg-view-box="-10, -10, 50, 50"
      style="width: 100%"
      v-else
    >
      <div v-for="item of dataList" :key="item.id">
        <homeVideoPc :data="item"></homeVideoPc>
      </div>
    </div>
    <el-pagination
      background
      style="padding: 10px"
      layout="prev, pager, next"
      :total="page.total"
      pager-count="5"
      hide-on-single-page="true"
      page-sizes="20"
      :page-count="page.pages"
      @change="onChangePage"
    />
  </div>
  <el-empty description="description" v-if="dataList.length <= 0 && !loading" />
</template>

<script setup>
import request from "@/assets/js/request";
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import homeVideoPc from "@/components/video/home-video-pc.vue";
import tool from "@/assets/js/tool";

const mobile = localStorage.getItem("mobile");
const dataList = ref([]);
const title = ref("");
const loading = ref(false);
const page = ref({
  pageNum: 1,
  total: 0,
  pages: 0,
});
const sortValue = ref(1);
const tagList = ref([]);
const isCollapse = ref(false);

const selectTags = ref([]);

const sortArr = ref([
  {
    id: 1,
    label: "综合排序",
  },
  {
    id: 2,
    label: "最多播放",
  },
  {
    id: 3,
    label: "最新发布",
  },
  {
    id: 4,
    label: "最多点赞",
  },
  {
    id: 5,
    label: "最多收藏",
  },
]);

const sort = (item) => {
  if (loading.value) {
    ElMessage({
      message: "等我加载完再点啦~",
      grouping: true,
      type: "warning",
    });
    return;
  }
  if (sortValue.value === item) {
    return;
  }
  sortValue.value = item;
  getDataList();
};

const chooseTag = (id) => {
  const index = selectTags.value.indexOf(id);
  if (index != -1) {
    selectTags.value.splice(index, 1);
  } else {
    if (selectTags.value.length >= 5) {
      ElMessage({
        message: "最多只能选择5个标签",
        grouping: true,
        type: "warning",
        showClose: true,
        plain: true,
      });
      return;
    }
    selectTags.value.push(id);
  }
  debouncedGetDataList();
};

const getDataList = () => {
  loading.value = true;
  const formData = {
    pageNum: page.value.pageNum,
    title: title.value,
    sort: sortValue.value,
    typeIds: selectTags.value,
  };

  request
    .post(`/client/video/page`, formData)
    .then((res) => {
      if (res.code === 200) {
        dataList.value = res.data.records;
        page.value.pageNum = res.data.current;
        page.value.pages = res.data.pages;
        page.value.total = res.data.total;
      }
      loading.value = false;
    })
    .catch((err) => {
      ElMessage.error(err.message);
      loading.value = false;
    });
};
const debouncedGetDataList = tool.debounce(getDataList, 2000);
const onChangePage = (pageNum) => {
  page.value.pageNum = pageNum;
  getDataList();
};

const getTagList = () => {
  request
    .get("/client/tag/list")
    .then((res) => {
      tagList.value = res.data;
    })
    .catch(() => {
      ElMessage.error("分类获取失败");
    });
};

onMounted(() => {
  getDataList();
  getTagList();
});
</script>

<style scoped lang="scss">
@mixin group-video($group, $gapWidth) {
  display: grid;
  grid-template-columns: repeat($group, 1fr);
  grid-gap: $gapWidth;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.video-group {
  @include group-video(2, 10px);
}
.search-container {
  width: 70%;
  box-sizing: border-box;
  text-align: center;
  display: block;
  margin: 40px auto;
}

input#search-bar {
  margin: 0 auto;
  width: 100%;
  height: 45px;
  padding: 0 20px;
  font-size: 1rem;
  border: 1px solid #d0cfce;
  outline: none;
  &:focus {
    border: 1px solid #008abf;
    transition: 0.35s ease;
    color: #008abf;
    &::-webkit-input-placeholder {
      transition: opacity 0.45s ease;
      opacity: 0;
    }
    &::-moz-placeholder {
      transition: opacity 0.45s ease;
      opacity: 0;
    }
    &:-ms-placeholder {
      transition: opacity 0.45s ease;
      opacity: 0;
    }
  }
}

.search-icon {
  position: relative;
  float: right;
  width: 75px;
  height: 75px;
  top: -62px;
  right: -45px;
}

.video-pc {
  @include group-video(5, 20px);
}

.sort {
  display: flex;
  padding: 20px 0;
  & > div {
    width: 8rem;
    text-align: center;
    padding: 4px 0;
    margin-right: 5px;
    .el-button {
      color: rgb(44, 44, 44);
    }
  }
}

.active {
  background: #ffcca7;
  border-radius: 5px;
  .el-button {
    color: #f06606 !important;
  }
}
.zw {
  height: 400px;
}

.tags {
  display: flex;
  padding: 10px 10px 20px 10px;
  flex-wrap: wrap;
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 20px;
  position: relative;
  font-size: 14px;
  justify-content: center;
  & > div {
    padding: 5px;
    min-width: 70px;
    text-align: center;
    margin-bottom: 5px;
    margin-right: 5px;
  }

  .tag:hover {
    cursor: pointer;
  }

  .collapse {
    position: absolute;
    right: 0;
    bottom: 0;
    text-align: right;
    background: linear-gradient(to left, #f2f0f4, rgba(#f2f0f4, 0));
  }
}
</style>
